<template>
    <div>
        <mt-swipe :auto="4000">  
            <mt-swipe-item v-for="item in swipeList" :key="item.id">
                <img :src="item.img" alt="">
            </mt-swipe-item>  
        </mt-swipe> 

        <div class="mui-slider-item">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4">
                    <router-link to="/newsList">
                        <img src="../../images/menu1.png" alt="">
                        <div class="mui-media-body">新闻资讯</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4">
                    <router-link to="/photos">
                        <img src="../../images/menu2.png" alt="">
                        <div class="mui-media-body">图片分享</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4">
                    <router-link to="/shopList">
                        <img src="../../images/menu3.png" alt="">
                        <div class="mui-media-body">商品购买</div>
                    </router-link>
                </li>
                <!--<li class="mui-table-view-cell mui-media mui-col-xs-4">
                    <router-link to="">
                        <img src="../../images/menu4.png" alt="">
                        <div class="mui-media-body">留言反馈</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4">
                    <router-link to="">
                        <img src="../../images/menu5.png" alt="">
                        <div class="mui-media-body">视频专区</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4">
                    <router-link to="">
                        <img src="../../images/menu6.png" alt="">
                        <div class="mui-media-body">联系我们</div>
                    </router-link>
                </li>-->                
            </ul>
        </div> 
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    export default {
        data() {
            return {
                swipeList:[] //定义一个轮播图数组
            }
        },

        created: function(){
            this.getSwipe(); //页面初始化完成就调用方法
        },

        methods: {
            //获取轮播图数据
            getSwipe(){
                this.$http.get('api/getlunbo').then(resule =>{               
                    if(resule.body.status === 0){
                        this.swipeList = resule.body.message;                      
                    }else{
                        Toast({
                            message: '获取轮播图失败',
                            position: 'middle',
                            duration: 2000
                        });
                    }
                })
            }
        },
    }
</script>

<style lang="less" scoped>
    .mint-swipe{
        height: 200px;     
        img{
            width: 100%;
            height: 100%;
        }      
    }

    .mui-slider-item{
        padding-top: 20px;
        .mui-table-view{
            background-color: #fff;
            border: 0;
            -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;

            .mui-table-view-cell{
                border: 0;
                img{
                    width: 60px;
                }
            }
        }
    }
</style>
